<template>
	<view class="picker-pages">
		<image :src="imgStorage+'/login/lianzu.png'" class="info-icon" v-if="type==1"></image>
		<image :src="imgStorage+'/login/gongzu.png'" class="info-icon" v-else-if="type==2"></image>
		<image :src="imgStorage+'/login/zhiguan.png'" class="info-icon" v-else-if="type==3"></image>
		<picker :range="range" :range-key="name" :value="index" @change="pickerChange">
			{{range[index]?range[index].name:'请选择'}}
		</picker>
		<view class="iconfont icon-arrow-right-s-fill"></view>
	</view>
</template>

<script>
	import {
		setStorage
	} from '@/util/auth.js';
	export default {
		name: 'NormalPicker',
		model: {
			prop: 'name',
			event: 'change',
		},
		props: {
			search: {
				type: Boolean,
				default: false,
			},
			value: Number | String,
			// range: {
			// 	type: Array,
			// 	default: () => []
			// },
			name: {
				type: String,
				default: 'name'
			},
			selectId: {
				type: String,
				default: 'name'
			},
		},
		watch: {
			name: {
				immediate: true,
				handler(val) {
					if (val == null) {
						this.index = null;
					} else {
						this.initSelect()
					}
				}
			},
			range() {
				this.initSelect()
			}
		},
		methods: {
			initSelect() {
				this.index = this.range.findIndex(item => item.id == this.selectId);
			},
			pickerChange(e) {
				this.index = e.detail.value;
				this.$emit('change', this.range[this.index].id)
				setStorage('selectId', this.range[this.index].id)
				this.type = this.range[this.index].type
			}
		},
		data() {
			return {
				index: 0,
				type: 1,
				range: [{
						id: 1,
						type: 1,
						name: '北片世博花园12#4-401'
					},
					{
						id: 2,
						type: 2,
						name: '北片世博花园12#4-401'
					},
					{
						id: 3,
						type: 3,
						name: '北片世博花园12#4-401'
					}
				]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.picker-pages {
		display: flex;
		align-items: center;

		.info-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
		}

		.iconfont {
			font-size: 50rpx;
			color: #767676;
		}
	}
</style>